<template>
    <view class="content">
        <scroll-view class="question">
            <view class="item" :class="{reverse:item.role!='user', 'user-item':item.role=='user'}" v-for="(item,index) in historys">
                <text class="text">{{item.content}}</text>
                <uni-icons :type="item.role=='user'? 'person':'pyq'" size="25"></uni-icons>
            </view>
        </scroll-view>

        <!-- 提问区域 -->
        <view class="word">
            <uni-easyinput class="input" v-model="word" placeholder="请输入提问内容" />
            <view class="btn" @tap="doQuestion">提问</view>
        </view>
    </view>
</template>
<!-- sk-WaleMQb3dFSBf7eVvOGMwnarH9KwVL89FnhNkDDWAbugKy0h -->
<script setup>
    import { ref } from 'vue'
    import { CONFIG } from '../../utils/config'
    const word = ref("")
    // 对话记录的数组
    const historys = ref([])
    // 提问的模型
    const model = {
        "model": "moonshot-v1-8k",
        "messages": [],
        "temperature": 0.3
    }
    // 向kimi提问
    async function doQuestion() {
        if (word.value == "") {
            uni.showToast({
                title: "请输入问题：",
                icon: "none"
            })
        } else {
            historys.value.push({
                "role": "user",
                "content": word.value
            })
            model.messages = historys.value
            let res = await uni.$post(CONFIG.kimi_url + "/v1/chat/completions", model)
            console.log(res.choices[0].message)
            historys.value.push(res.choices[0].message)
            word.value = ""
        }
    }
</script>

<style lang="scss" scoped>
   .content {
        height: calc(100vh - 97px);
        border: 1px solid green;
        position: relative;

       .question {
            border: 1px solid #7b68ee;
            height: calc(100vh - 97px - 45px);

           .item {
                display: flex;
                    width: 730rpx;
                    margin-top: 5px;
                    align-items: center;

               .text {
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    padding: 5px;
                    font-size: 14px;

                }
            }

           .reverse {
                justify-content: flex-start; // 靠左对齐
                   text-align: left; // 文本内容左对齐
                   padding-left: 10rpx; // 左侧适当添加内边距
            }

           .user-item {
               justify-content: flex-end; // 靠右对齐
                  text-align: right; // 文本内容右对齐
                  padding-right: 10rpx; // 右侧适当添加内边距
            }
        }

       .word {
            position: absolute;
            bottom: 0;
            width: 720rpx;
            height: 85rpx;
            border: 1px solid #7b68ee;
            display: flex;
            align-items: center;
            padding: 0 5px;

           .btn {
                height: 35px;
                border: 1px solid #7b68ee;
                border-radius: 5px;
                width: 100rpx;
                text-align: center;
                line-height: 35px;
                margin-left: 5px;
                cursor: pointer;
            }
        }
    }
</style>